<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>消息中心</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
    </style>
</head>
<body>

<div class="data-manage-table">
    <div style=" border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane :label="noReadNum" name="first">
                <el-table :show-header="false" :data="noReadData" fit>
                    <el-table-column prop="text" label="text" align="center"></el-table-column>
                    <el-table-column prop="sendTime" label="发送时间"  align="center"></el-table-column>
                    <!-- 相关操作 -->
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="readState(scope.row)">标记已读</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane :label="readNum" name="second">
                <el-table :show-header="false" :data="readData" fit>
                    <el-table-column prop="text" label="text" align="center"></el-table-column>
                    <el-table-column prop="readTime" label="读信时间" align="center"></el-table-column>
                    <!-- 相关操作 -->
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="isDeleted(scope.row, 1)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane :label="deletedNum" name="third">
                <el-table :show-header="false" :data="deletedData" fit>
                    <el-table-column prop="text" label="text" align="center"></el-table-column>
                    <el-table-column prop="deletedTime" label="删除时间" align="center"></el-table-column>
                    <!-- 相关操作 -->
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="isDeleted(scope.row, 0)">还原</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

        </el-tabs>
    </template>

        <!--分页组件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[5,10,15]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>

    </div>
</div>

<script src="/js/vue.min.js"></script>
<script src = "/js/2.15.12/index.js"></script>
<link href = "/css/2.15.12/index.css" rel="stylesheet">
<script src="/plugins/axios-0.27.2/axios.min.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/httpVueLoader.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (
        function () {
            new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        activeName: 'first',

                        // 未读信件表格
                        noReadData : [],
                        // 未读信件数量
                        noReadNum : '',

                        // 已读信件表格
                        readData : [],
                        // 已读信件数量
                        readNum : '',

                        // 删除信件表格
                        deletedData : [],
                        // 删除信件数量
                        deletedNum : '',

                        //分页相关信息
                        pagination: {
                            currentPage : 1, //当前页码
                            pageSize : 5, //每页显示记录数
                            total : 0, //总记录数
                        },

                        // 选项卡
                        tabIndex : '',
                    }
                },

                //自动触发写入的函数
                created() {
                    this.getByQueryPage(1);
                    this.getByQueryPage(2);
                    this.getByQueryPage(3);
                    this.handleClick(1);
                   
                },
                mouted(){
        
                },
                computed:{
                    // getMsgNum(){
                    //     return "未读消息" + "(" + this.pagination.total + ")";
                    // }

                },
                methods: {

                    handleClick(tab) {
                        console.log(tab.name);
                        if (tab.name == 'first'){
                            this.getByQueryPage(1);
                            this.tabIndex = 1
                        }
                        if (tab.name == 'second'){
                            this.getByQueryPage(2);
                            this.tabIndex = 2
                        }
                        if (tab.name == 'third'){
                            this.getByQueryPage(3);
                            this.tabIndex = 3
                        }
                    },

                    getByQueryPage:function(flag){
                        //用于重置搜索条件
                        if (flag == 1) {
                            // this.pagination.currentPage = 1;
                            axios.get('/msgText/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                                {
                                    params:{
                                        state : '未读',
                                    }
                                }).then((res)=>{
                                if (res.data.code === "200") {
                                    // 查询收件箱数据
                                    console.log(res.data.data);
                                    this.pagination.pageSize = res.data.data.size;
                                    this.pagination.currentPage = res.data.data.current;
                                    this.pagination.total = res.data.data.total;
                                    this.noReadData = res.data.data.records;
                                    this.noReadNum = "未读消息"  + "(" + this.pagination.total + ")";
                                } else{
                                    this.$message.success("查询失败");
                                }
                            });
                        }
                        if (flag == 2){
                            // this.pagination.currentPage = 1;
                            axios.get('/msgText/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                                {
                                    params:{
                                        state : '已阅',
                                        isDeleted : 0,
                                    }
                                }).then((res)=>{
                                if (res.data.code === "200") {
                                    this.pagination.pageSize = res.data.data.size;
                                    this.pagination.currentPage = res.data.data.current;
                                    this.pagination.total = res.data.data.total;
                                    this.readData = Object.values(res.data.data.records);
                                    this.readNum = "已读消息"  + "(" + this.pagination.total + ")";
                                } else{
                                    this.$message.success("查询失败");
                                }
                            });
                        }

                        if (flag == 3){
                            // this.pagination.currentPage = 1;
                            axios.get('/msgText/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                                {
                                    params:{
                                        state : '已阅',
                                        isDeleted : 1,
                                    }
                                }).then((res)=>{
                                if (res.data.code === "200") {
                                    this.pagination.pageSize = res.data.data.size;
                                    this.pagination.currentPage = res.data.data.current;
                                    this.pagination.total = res.data.data.total;
                                    this.deletedData = Object.values(res.data.data.records);
                                    this.deletedNum = "回收站"  + "(" + this.pagination.total + ")";
                                } else{
                                    this.$message.success("查询失败");
                                }
                            });
                        }

                    },

                    // 将信件状态更改为已阅
                    readState(row){
                        axios({
                            method : 'put',
                            url : '/msgText/normal/setReadState',
                            data : {
                                id : row.id,
                                state : '已阅',
                                readTime : this.getNowTime()
                            },
                            headers : {
                            'Content-Type' : 'application/json;charset=UTF-8'
                            }
                            }).then((res)=>{
                            if (res.data.code==='200'){
                                this.$notify({
                                    title : '成功',
                                    message : '已阅',
                                    type : 'success',
                                })
                                this.getByQueryPage(1)
                            }
                        })
                    },

                    // 将信件逻辑删除
                    isDeleted(row, flag){
                        // flag 用于判断是要进行逻辑删除还是还原
                        axios({
                                method : 'put',
                                url : '/msgText/normal/setIsDeleted',
                                data : JSON.stringify({
                                    id : row.id,
                                    isDeleted : flag,
                                    deletedTime : this.getNowTime(),
                                }),
                                headers : {
                                'Content-Type' : 'application/json;charset=UTF-8'
                            }
                            }).then((res)=>{
                            if (res.data.code==='200'){
                                var message;
                                if (flag == 1){
                                    message = " 成功删除"
                                    this.getByQueryPage(2)
                                } else{
                                    message = "成功还原"
                                    this.getByQueryPage(3)
                                }
                                this.$notify({
                                    title : '成功',
                                    message : message,
                                    type : 'success',
                                })
                            }
                        })
                    },

                    // 获取当前时间
                    getNowTime(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth()+1;
                        var day = date.getDate();
                        var hour = date.getHours();
                        var minute = date.getMinutes();
                        var second = date.getSeconds();

                        var time = year + '-' + this.handleTimeStr(month) + '-' +
                            this.handleTimeStr(day) + ' ' + this.handleTimeStr(hour) + ':' + this.handleTimeStr(minute)
                            + ':' + this.handleTimeStr(second);
                        return time;
                    },

                    // 分页查询 每页显示多少条数据
                    handleSizeChange:function(pageSize){
                        this.pagination.pageSize = pageSize;
                        this.getByQueryPage(this.tabIndex);
                    },

                    //分页查询 切换页码
                    handleCurrentChange:function(currentPage){
                        this.pagination.currentPage = currentPage;
                        this.getByQueryPage(this.tabIndex);
                    },

                    // 解决 10:2:2 出现各位数字格式化为 10:02:02
                    handleTimeStr(tStr){
                        if (tStr < 10){
                            return '0'+ tStr
                        }else {
                            return tStr
                        }
                    },



                }
            });
        })()
</script>

</body>
</html>